<template>
  <div class="detail">
    <div
      class="header"
      :style="{ backgroundImage: 'url(' + info.head_pic_url + ')' }"
    >
      <van-nav-bar
        title="详情"
        left-text="返回"
        right-text="..."
        left-arrow
        @click-left="$router.back()"
      />
      <div class="shop_header">
        <div class="title">
          <div class="left">
            <div class="imgbox">
              <img :src="info.picUrl" alt="" />
            </div>
            <h2>{{ info.name }}</h2>
          </div>
          <div class="right">
            <span style="color: red" @click="cancel1(info)" v-if="isCollection"
              >❤</span
            >
            <span style="color: white" @click="requeset_fav(info)" v-else
              >❤</span
            >
          </div>
        </div>

        <div class="btn">
          <span
            v-for="(item, index) in btn"
            :key="index"
            @click="active(index)"
            :class="{ active: currentIndex == index }"
            >{{ item }}</span
          >
        </div>

        <div class="card">
          <div class="send">
            商家配送{{ info.deliveryTimeTip }} | 距离{{ info.distance }}
          </div>
          <!-- <div class="volume">
            <span>￥7 </span>
            <van-icon name="gem" />
            <span> 无门槛 </span>
            <span> | </span>
            <span>领取</span>
          </div> -->
          <span class="allowance"> 津贴 2元 </span>
          <div class="inform">
            <p>{{ info.bulletin }}</p>
            <van-icon name="arrow-down" />
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="goods">
        <div class="left">
          <ul>
            <li
              v-for="(item, index) in goods"
              :key="index"
              @click="active(index)"
              :class="{ active1: currentIndex == index }"
            >
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </div>
        <div class="right">
          <!-- 初次因为 goods是空的会报错，使用 && 判断 修改报错（如果goods[currentIndex]不为空，再读取goods[currentIndex].goodlist）-->
          <div
            class="content"
            v-for="(item, index) in goods[currentIndex] &&
            goods[currentIndex].goodlist"
            :key="index"
          >
            <div class="imgBox">
              <img :src="item.picture" alt="" />
            </div>
            <div class="text">
              <h2>{{ item.name | ellipsis }}</h2>
              <p>{{ item.unit }}</p>
              <div class="sales">
                <span>{{ item.month_saled_content }}</span>
                <span>{{ item.promotion_info }}</span>
              </div>
              <div class="pirce">
                <span>{{ item.min_price }}</span>
                <span>+</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <ShopCart ref="cart" />
    <div class="cartbtn">
      <div class="cart_left">
        <van-icon
          name="send-gift"
          size="1rem"
          @click="$refs.cart.changeVisible()"
        />
        <span>总数:0 </span>
        <span> 总价:0</span>
      </div>
      <div class="cart_right">去结算</div>
    </div>
  </div>
</template>

<script>
import ShopCart from "@/components/ShopCart.vue";
import { detail, unfav } from "@/utils/api";
import { Dialog, Toast } from "vant";
//导入vuex中的工具函数(辅助函数) , 使用该工具函数 简化vuex在组件中的应用
import { mapActions, mapMutations, mapState } from "vuex";
export default {
  components: {
    ShopCart,
  },
  data() {
    return {
      currentIndex: 0,
      btn: ["搜索", "点餐", "评价", "商家"],
      info: {},
      goods: [],
    };
  },
  mounted() {
    var id = this.$route.params.id;
    detail({ id: id }).then((res) => {
      console.log(res.data);
      if (res.data.shopinfo) {
        this.info = res.data.shopinfo.info;
        this.goods = res.data.shopinfo.taglist;
      } else {
        Dialog.confirm({
          title: "提示",
          message: "该店铺已倒闭，请选择其他店铺",
        }).then(() => {
          this.$router.back();
        });
      }
    });
  },
  methods: {
    ...mapMutations(["collection", "cancel"]),
    ...mapActions(["requeset_fav"]),
    // 取消收藏
    cancel1(info) {
      var userid = JSON.parse(localStorage.getItem("userinfo")).id;
      unfav({ userid, shopid: info.mtWmPoiId }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          Toast.fail(res.data.msg);
          this.$store.commit("cancel", info);
        }
      });
    },
    active(index) {
      this.currentIndex = index;
    },
  },
  computed: {
    //mapState()这个工具函数 会将vuex中的数据 映射到组件的computed中.
    ...mapState(["collectList"]),
    // 判断vuex中有没有该店铺
    isCollection() {
      var id = this.collectList.findIndex((item) => {
        return item.mtWmPoiId == this.info.mtWmPoiId;
      });
      if (id != -1) {
        return true;
      }
    },
  },
  filters: {
    ellipsis(vla) {
      if (vla.length > 20) {
        return vla.substr(0, 20) + "...";
      } else {
        return vla;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.detail {
  .header {
    margin-bottom: 0.5333rem;
    background: no-repeat, center;
    background-size: 100% 100%;
    // background-image: linear-gradient(to top,rgba(255,255,255,1), rgba(0,0,0,0));
    width: 100%;
    .van-nav-bar {
      background-color: rgba($color: #000000, $alpha: 0);
    }
    .van-hairline--bottom::after {
      border-bottom-width: 0rem;
    }
    .shop_header {
      // background: pink;
      margin: 0.2667rem;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0.4rem 0;
        .left {
          display: flex;
          align-items: center;
          .imgbox {
            width: 1.0667rem;
            margin-right: 0.4rem;
            img {
              display: block;
              width: 100%;
              border-radius: 50%;
            }
          }
          h2 {
            font-size: 0.48rem;
            color: #eee;
            font-weight: normal;
          }
        }
        .right {
          font-size: 0.64rem;
        }
      }
      .btn {
        color: #fff;
        margin-bottom: 0.4rem;
        position: sticky;
        top: 0;
        span {
          font-size: 0.4267rem;
          margin-right: 0.5333rem;
          padding-bottom: 0.08rem;
        }
        .active {
          font-weight: 700;
          border-bottom: 0.08rem solid white;
        }
      }
      .card {
        background: white;
        border-radius: 0.2667rem;
        box-sizing: border-box;
        padding: 0.2667rem;
        box-shadow: 0 0.1333rem 0.1333rem #f5f5f5;
        .send {
          font-size: 0.3733rem;
          color: #111;
          margin-bottom: 0.2667rem;
        }
        // .volume {
        //   width: 4.8rem;
        //   box-sizing: border-box;
        //   padding: 0.2667rem 0.4rem;
        //   border-radius: 0.1333rem;
        //   margin-bottom: 0.2667rem;
        //   background-color: #fee5b8;
        //   color: #222;
        //   span:first-child {
        //     font-weight: 700;
        //     font-size: 0.48rem;
        //   }
        //   i,
        //   span:nth-child(3) {
        //     font-size: 0.32rem;
        //   }
        //   span:nth-child(4) {
        //     margin: 0 0.1333rem;
        //   }
        //   span:last-child {
        //     font-size: 0.4267rem;
        //     font-weight: 600;
        //   }
        // }
        .allowance {
          display: inline-block;
          box-sizing: border-box;
          padding: 0.08rem 0.16rem;
          font-size: 0.3733rem;
          color: red;
          background-color: lightpink;
          opacity: 0.8;
          margin-bottom: 0.2667rem;
        }
        .inform {
          display: flex;
          justify-content: space-between;
          font-size: 0.3733rem;
          color: #999;
        }
      }
    }
  }
  .section {
    .goods {
      display: flex;
      margin: 0 0.4rem;
      .left {
        //   background: pink;
        width: 2.1333rem;
        ul {
          width: 100%;
          overflow: hidden;
          li {
            width: 100%;
            //   background: red;
            span {
              // background: green;
              font-size: 0.3733rem;
              display: block;
              margin: 0.8rem auto;
              width: 1.3333rem;
              padding: 0.1333rem 0;
            }
          }
        }
      }
      .right {
        flex: 1;
        margin-top: 0.5333rem;
        .content {
          display: flex;
          margin-bottom: 0.4rem;
          width: 100%;
          .imgBox {
            margin-right: 0.2667rem;
            img {
              width: 2.6667rem;
              height: 2.6667rem;
            }
          }
          .text {
            width: 100%;
            position: relative;
            h2 {
              font-size: 0.3733rem;
              font-weight: 600;
            }
            p {
              margin: 0.1333rem 0;
            }
            p,
            .sales {
              font-size: 0.32rem;
              color: #666;
            }
            .sales span {
              margin-right: 0.2667rem;
            }
            .pirce {
              position: absolute;
              bottom: 0;
              width: 100%;
              display: flex;
              justify-content: space-between;
              span {
                font-size: 0.48rem;
                color: red;
                &:last-child {
                  display: block;
                  color: #fff;
                  font-size: 0.5333rem;
                  width: 0.5333rem;
                  height: 0.5333rem;
                  text-align: center;
                  line-height: 0.5333rem;
                  background-color: lightskyblue;
                  border-radius: 0.2667rem;
                  margin-right: 0.2667rem;
                }
              }
            }
          }
        }
      }
    }
  }
  .cartbtn {
    background-color: #999;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 0.4rem;
    .cart_left {
      font-size: 0.48rem;
      color: white;
      position: relative;
      i {
        position: absolute;
        color: #1989fa;
        bottom: -9px;
        left: 0%;
      }
      span:nth-child(2) {
        margin-left: 1.3333rem;
      }
      span:nth-child(3) {
        margin-left: 0.2rem;
      }
    }
    .cart_right {
      background: #1989fa;
      color: white;
      font-size: 0.5333rem;
      padding: 0.1333rem 0.8rem;
      // border-radius: 0.1333rem;
      border-radius: 50px;
    }
  }
}
.active1 {
  border-left: 0.08rem solid red;
}
// 导航栏的样式
::v-deep .van-nav-bar .van-icon {
  color: white;
}
::v-deep .van-nav-bar__text {
  color: white;
}
::v-deep .van-nav-bar__title {
  color: white;
}
::v-deep.van-nav-bar {
  line-height: 0.64rem;
}
::v-deep .van-nav-bar__content {
  height: 1.28rem;
}
::v-deep .van-nav-bar__arrow {
  font-size: 0.4267rem;
}
::v-deep .van-nav-bar__text {
  font-size: 0.3733rem;
}
::v-deep .van-nav-bar__title {
  font-size: 0.4267rem;
}
</style>